<template>
  <view>
    <view class="bslist-t" v-if="this.searchObj.enterpriseName==''">
      <view :class="tabIndex == 0 ? 'bslist-t-ac' : ''" @click="changeTab(0)">
        待确认
      </view>
      <view :class="tabIndex == 1 ? 'bslist-t-ac' : ''" @click="changeTab(1)">
        欠费中
      </view>
      <view :class="tabIndex == 2 ? 'bslist-t-ac' : ''" @click="changeTab(2)">
        已缴费
      </view>
    </view>
    <view class="bslist-c-box" :style="this.searchObj.enterpriseName==''?'margin-top: 110rpx;':'margin-top: 0rpx;'">
      <view class="bslist-c">
        <mescroll-body
            class="water_scroll"
            ref="mescrollRef"
            @init="mescrollInit"
            :down="downOption"
            @down="downCallback"
            @up="upCallback"
        >
          <view
              class="bslist-col xb-card"
              v-for="(item, index) in dataList"
              :key="index"
              @click="itemClick(item)"
          >
            <view class="bslist-col-t">
              <text :style="{ color: type[item.billState||'0'].color }">
                {{
                  type[item.billState || '0'].state
                }}
              </text>
              <text>{{ item.enterpriseName }}</text>
            </view>
            <view class="bslist-col-c">
              <text>{{ item.createTime }}</text>
              <text>金额：{{ item.receivableAmount }}</text>
            </view>
          </view>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

export default {
  mixins: [MescrollMixin], // 使用mixin
  name: 'qyRefundList',
  data() {
    return {
      type: [
        {
          state: "待确认",
          color: "#F74D39",
        },
        {
          state: "欠费中",
          color: "#FF5E00",
        },
        {
          state: "已缴费",
          color: "#44D94B",
        }
      ],
      billType: 0,//账单类型
      tabIndex: 0,
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      dataList: [],
      pageInfor: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      billState: "0",
      searchObj: {
        enterpriseName: ''
      }
    };
  },
  onLoad({enterpriseName, type}) {
    if (enterpriseName) {
      this.billState = ""
      this.searchObj.enterpriseName = enterpriseName
    }
    if (type) {
      this.billType = type

      function setTit(title){
        uni.setNavigationBarTitle({
          title
        })
      }
      switch (type) {
        case "0":
          setTit('公寓账单')
          break
        default:
          setTit('退租账单')
          break
      }
    }
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index
      this.dataList = []
      this.billState = index;
      this.mescroll.resetUpScroll();
    },
    itemClick(item) {
      switch (this.billType) {
        case "0":
          this.navTo("/pagesBusiness/bill/billInfo?id=" + item.id);
          break
        default:
          this.navTo("/pagesBusiness/bill/reFundBillInfo?id=" + item.id);
          break
      }
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      switch (this.billType) {
        case '0':
          this.getGongYuBill(page)
          break
        default:
          this.getTuiBill(page)
      }
    },
    getTuiBill(page) {
      this.apis.businessApi
          .feApartmentCancelBillList({
            pageNum: page.num,
            pageSize: page.size,
            billState: this.billState,
            ...this.searchObj
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            this.mescroll.endErr();
          });
    },
    getGongYuBill(page) {
      this.apis.lifeApi
          .feApartBillList({
            pageNum: page.num,
            pageSize: page.size,
            billState: this.billState,
            ...this.searchObj
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            this.mescroll.endErr();
          });
    }
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.bslist-t {
  width: 100vw;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  left: 0;
  z-index: 9;

  .bslist-t-ac {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    font-weight: 600;
    font-family: PingFangSC-Medium, PingFang SC;

    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      left: 50%;
      width: 30rpx;
      height: 6rpx;
      background: #6cc04e;
      border-radius: 4rpx;
      transform: translateX(-50%);
    }
  }
}

.bslist-c-box {
  margin-top: 110rpx;
  padding: 20rpx;

  .bslist-c {
    .bslist-col {
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
      margin-bottom: 20rpx;
      padding: 26rpx 32rpx;

      view {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;

        text:nth-child(2) {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 36rpx;
        }

        &:nth-child(1) {
          padding-bottom: 26rpx;
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
          border-bottom: 1rpx solid #eee;
        }

        &:nth-child(3) {
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
